<!-- 设置会员卡 -->
<template>
  <div class="home">
    <div class="search">
      <!-- <el-select v-model="selected" placeholder="全部类型">
        <el-option label="全部类型" value=""></el-option>
        <el-option label="储值类型" value="2"></el-option>
        <el-option label="次卡类型" value="0"></el-option>
        <el-option label="期限类型" value="1"></el-option>
      </el-select> -->
      <el-row class="row">
      <el-col :span="4">
        <el-input
          placeholder="会员卡名称"
          v-model="searchText"
          suffix-icon="el-icon-search"
        ></el-input>
      </el-col>
      <el-col :span="2">

      <el-button class="setting-btn" type="primary" @click="pageVipCard"
        >查询</el-button
      >
      </el-col>

      <router-link to="/setVipCardManagement">
        <el-button class="setting-btn" type="primary">添加会员卡</el-button>
      </router-link>
      </el-row>
    </div>

    <div class="member-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="name" label="会员卡名称"></el-table-column>
        <el-table-column prop="cardType" label="类型"></el-table-column>
        <el-table-column prop="venues" label="支持场馆"></el-table-column>
        <el-table-column prop="order" label="排序"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <router-link
              :to="{ path: '/setVipCardManagement', query: { id: row.id } }"
            >
              <el-button type="text" size="small">编辑</el-button>
            </router-link>
            <el-button type="text" size="small" @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
import userManagementhooks from "../../hooks/userManagement";
import pageVipCardStore from "../../store/vipCard";
import { RouterLink } from "vue-router";
export default defineComponent({
  props: {
    selected: {
      type: String,
      default: "",
    },
    searchText: {
      type: String,
      default: "",
    },
  },

  data() {
    return {};
  },
  setup() {
    const searchText = ref<string>("");
    const pages = pageVipCardStore();
    const tableData = ref([]);
    const selected = ref<string>();
    const pageVipCard = (): void => {
      let limit = ref<number>(100).value;
      let page = ref<number>(1).value;
      let cardType = ref<number>().value;
      let name = ref(searchText).value;
      userManagementhooks.page_vipCard(cardType, limit, name, page);
    };
    const del = (id) => {};
    onMounted(() => {
      // 页面加载完成后执行的函数
      // console.log(12313);
      pageVipCard();
      // console.log(store.setPageVipCardList);
    });
    watchEffect(() => {
      tableData.value = pages.getPageVipCard;
    });
    return {
      pageVipCard,
      tableData,
      del,
      searchText,
      selected,
    };
  },
  computed: {
    filteredData() {
      if (!this.selected && !this.searchText) {
        return this.tableData;
      }
      return this.tableData.filter((item) => {
        if (this.selected && item.status !== this.selected) {
          return false;
        }
        if (
          this.searchText &&
          !item.cardNumber.includes(this.searchText) &&
          !item.member.includes(this.searchText) &&
          !item.phone.includes(this.searchText)
        ) {
          return false;
        }
        return true;
      });
    },
  },
  components: {
    RouterLink, // 注册 RouterLink 组件
  },
});
</script>
  
  <style scoped>
.member-table {
  width: 100%;
}
.home {
  padding: 20px;
}

.search {
 
  align-items: center;
  margin-bottom: 20px;
}

.setting-btn {
  margin-left: 10px;
}
</style>
  